<template>
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="user-info">
                <img class="avatar" :src="user.avatar" alt="用户头像" />
                <h3 class="username">{{ user.name }}</h3>
                <p class="user-job">{{ user.job }}</p>
                <p class="user-location">{{ user.location }}</p>
            </div>
        </div>

        <!-- 主题内容 -->
        <div class="main-content">
            <div>
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in 6" :key="item">
                        <img :src="'/src/assets/' + item + '.jpg'" alt="Image"
                            style="width: 100%; height: 100%; object-fit: cover;">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="charts-container">
                <div class="chart" ref="skillChart"></div>
                <div class="chart" ref="barChart"></div>
                <div class="chart" ref="pieChart"></div>
            </div>
            <div>
                <Statistic />
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import Statistic from './components/Statistic.vue';

// 用户信息
const user = ref({
    avatar: "https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExeDdhbGtlamtzNXpvajhvY2tiNm5lZGp3MDJudHdlNXVjcjR1ZXd3byZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/lMsT2f47tDxFMYdJMC/giphy.webp",
    name: '不打麻药',
    job: 'Net 开发工程师',
    location: '中国',
});

// 图表的 ref
const skillChart = ref(null);
const barChart = ref(null);
const pieChart = ref(null);

// 雷达图配置
const skillOptions = {
    title: {
        text: '技能雷达图',
        left: 'center',
        textStyle: {
            color: '#ecf0f1',
        },
    },
    tooltip: {
        trigger: 'axis'
    },
    radar: {
        indicator: [
            { name: 'Element-Plus', max: 100 },
            { name: 'Sql', max: 100 },
            { name: '.NET (C#)', max: 100 },
            { name: 'Redis', max: 100 },
            { name: 'Vue', max: 100 },
        ],
        radius: 90,
        shape: 'circle',
        splitNumber: 5,
        axisLine: {
            lineStyle: {
                color: '#ddd',
            },
        },
        axisName: {
            color: '#5C7BD9'
        },
    },
    series: [
        {
            name: '技能等级',
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            areaStyle: {},
            data: [
                {
                    value: [75, 80, 90, 70, 75],
                    name: '不打麻药',
                }
            ],
        },
    ],
};

// 柱状图配置
const barOptions = {
    title: {
        text: '工作年限与技能水平',
        left: 'center',
        textStyle: {
            color: '#333',
        },
    },
    polar: {
        radius: [30, '65%']
    },
    angleAxis: {
        max: 100,
        startAngle: 75
    },
    radiusAxis: {
        type: 'category',
        data: ['HTML', 'CSS', 'JS', 'Vue', 'Node'],
    },
    tooltip: {},
    series: {
        type: 'bar',
        data: [80, 70, 60, 80, 10],
        coordinateSystem: 'polar',
        label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
        }
    }
};

// 饼图配置
const pieOptions = {
    title: {
        text: '项目分布',
        left: 'center',
        textStyle: {
            color: '#ecf0f1',
        },
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '项目分布',
            type: 'pie',
            padAngle: 5,
            radius: ['50%', '80%'],
            itemStyle: {
                borderRadius: 10
            },
            label: {
                show: false,  // 显示文字
                position: 'center',  // 文字显示在饼图外部
            },
            data: [
                { value: 70, name: 'ElementPlus' },
                { value: 80, name: 'Vue' },
                { value: 20, name: 'CSS' },
                { value: 80, name: '.Net' },
                { value: 90, name: 'C#' },
                { value: 60, name: 'Js' },
            ],
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
        },
    ],
};

// 初始化图表
onMounted(() => {
    const radarInstance = echarts.init(skillChart.value);
    radarInstance.setOption(skillOptions);

    const barInstance = echarts.init(barChart.value);
    barInstance.setOption(barOptions);

    const pieInstance = echarts.init(pieChart.value);
    pieInstance.setOption(pieOptions);
});
</script>

<style scoped>
.dashboard-container {
    display: flex;
    height: calc(100vh - 100px);
    /* 页面高度去掉顶部 */
    overflow: hidden;
    /* 防止页面出现滚动条 */
}

.sidebar {
    width: 250px;
    background: linear-gradient(145deg, #2c3e50, #34495e);
    /* 深色渐变背景 */
    padding: 20px;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    border-radius: 12px;
    transition: all 0.3s ease;
    /* 增加平滑过渡效果 */
}

.sidebar:hover {
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3);
    /* 鼠标悬停时增强阴影 */
    background: linear-gradient(145deg, #34495e, #2c3e50);
    /* 悬停时交换渐变的颜色，增加互动感 */
}

.user-info {
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 2px solid #fff;
}

.username {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 10px 0;
    color: #ecf0f1;
}

.user-job,
.user-location {
    font-size: 1rem;
    color: #ecf0f1;
}

.main-content {
    flex-grow: 1;
    padding: 0 20px 0 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    /* 确保没有外部滚动条 */
    height: calc(100vh - 60px);
}

.charts-container {
    display: flex;
    /* 使用flex布局 */
    justify-content: space-between;
    /* 保证图表均匀分布 */
    gap: 20px;
    /* 图表之间的间隙 */
    flex-wrap: wrap;
    /* 保证在屏幕较窄时，图表会换行 */
    width: 100%;
}

.charts-Statistic {
    flex: 1;
    border-radius: 8px;
}

.chart {
    flex: 1;
    /* 图表宽度自适应，平分容器的宽度 */
    height: 300px;
    /* 设置一个固定高度，防止图表撑开容器 */
    max-width: 33%;
    /* 每个图表占容器的最大1/3宽度 */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
</style>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
